<template>
  <div class="w1200 city_page">
    <div class="row_box">
      <h2 class="h2">直接搜索</h2>
      <div class="input_box">
        <!-- <el-input v-model="term" class="a_input" placeholder="请输入城市中文或拼音" @keyup.enter.native="onSearch" /> -->
        <el-autocomplete
          v-model="term"
          class="a_input"
          placeholder="请输入城市中文或拼音"
          value-key="name"
          :fetch-suggestions="onSearch"
          @select="saveCity"
        ></el-autocomplete>
      </div>
    </div>

    <div class="row_box">
      <h2 class="h2">热门城市</h2>
      <div class="hot_word">
        <div
          class="word"
          :class="city == item.id ? 'active' : ''"
          v-for="(item, index) in hotCityList"
          :key="`hot_${index}`"
          @click="saveCity(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="row_box">
      <h2 class="h2">城市列表</h2>
      <div class="city_list">
        <div
          class="province_box"
          v-for="(item, index) in provinceList"
          :key="`pro_${index}`"
        >
          <div class="province">{{ item.name }}</div>
          <div class="city_box">
            <div
              class="cell"
              v-for="(citem, idx) in item.children"
              :key="`city_${idx}`"
              @click="saveCity(citem)"
            >
              {{ citem.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Input, Autocomplete } from "element-ui";
import { GET_CITY_HOTCITIES, GET_PROVINCE_CITIES } from "@/http/interface";
export default {
  components: {
    [Input.name]: Input,
    [Autocomplete.name]: Autocomplete,
  },
  data() {
    return {
      term: "",
      provinceList: [],
      province: "",
      cityList: [],
      city: "",
      hotCityList: [],
      currentCity: "",
      currentCityCode: "",
      allCityList: [],
    };
  },
  watchQuery: true,
  head() {
    return {
      link:[
        {ref:'canonical',href:`${this.$domain}/city`}
      ]
    };
  },
  async asyncData({ query, $axios, $cookies }) {
    let params = {};
    if (query.term) {
      params.term = query.term || "";
    }

    let res = await $axios.get(GET_CITY_HOTCITIES);
    let city = $cookies.get("city");
    let cityCode = $cookies.get("cityCode");
    let hotCityList = res.data || [];
    hotCityList.map((k) => {
      k.id = k.code;
      return k;
    });

    let ces = await $axios.get(GET_PROVINCE_CITIES, { params: params });
    let provinceList = ces.data || [];
    let allCityList = [];
    provinceList.map((k) => {
      allCityList = allCityList.concat(k.children || []);
    });

    return {
      hotCityList,
      provinceList,
      currentCity: city,
      currentCityCode: cityCode,
      term: query.term,
      allCityList,
    };
  },
  methods: {
    // 保存城市
    saveCity(row) {
      let pre = this.$store.state.fromPage;
      let query = {};
      query.city = row.name;
      query.code = row.id;
      this.city = row.code;
      this.$cookies.set("city", row.name);
      this.$cookies.set("cityCode", row.code);

      this.$routerPush(pre, query);
    },

    // 返回
    goBack() {
      this.$router.go("-1");
    },

    // 搜索
    onSearch(e, cb) {
      console.log(e);
      let term = this.term;
      let list = this.allCityList || [];
      let arr = list.filter((k) => {
        return k.name.includes(term);
      });
      console.log(arr);
      cb(arr);
    },

    // 监听下拉选择
    onSelect(e) {
        console.log(e)
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/city.less";
</style>